<html>
<head>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
</head>
<body>
  <div id="target"></div>
  <img id="img" src="">
  <script>
    // Some elements (e.g. form input for time values) can be implemented in
    // terms of HTML & CSS. This ensures they do not trigger spurious CSP
    // violation reports.
    async_test(t => {
      window.addEventListener("securitypolicyviolation", t.step_func_done(e => {
        // The only SPV we should receive is for the example.org image.
        assert_regexp_match(
            e.blockedURI, /example\.org/,
            "The only SPV we should receive is for the example.org image.");
      }));

      // Create the <input type=time> element. This should not report a SPV.
      document.getElementById("target").innerHTML = "<input type=time>";

      // Trigger an SPV, so we have at least one SPV event to wait on.
      // This needs to happen after styles are processed, hence the timeout.
      t.step_timeout(_ => {
        document.getElementById("img").src = "https://example.org/image.jpg";
      }, 1000);
    }, "Test that input with type=time does not report a Security Policy Violation.");
  </script>
</body>
</html>
